<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<style>
    .myFull {
        width: 100%;
        height: 100%;
    }

    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 999; /* 按需定义 */
    }

    .col-sm-3 {
        width: 200px !important;
    }

    .col-sm-8 {
        width: calc(100% - 200px) !important;
    }

    .listImg {
        display: table;
    }

    .closeBtn {
        width: 200px;
        height: 38px;
        position: relative;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .closeImages {
        height: 200px !important;
    }

    .closeBtn .upImg {
        width: 100%;
        height: 100%;
        word-wrap: break-word;
        word-break: normal;
    }

    .iconclose {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 25px;
        height: 25px;
    }

    .iconclose img {
        width: 20px;
        height: 20px;
    }

    .iconclose img:hover {
        cursor: pointer;
    }

    #editor-container {
        height: 200px;
        overflow: auto;
    }
</style>
<head th:include="include :: header"></head>
<link href="/lib/wangeditor/css/style.css" rel="stylesheet">
<script src="/lib/wangeditor/index.js"></script>
<body class="gray-bg">
<input id="myData" th:value="${null!=myData?myData:''}" type="hidden">
<input id="myDataRemark" th:value="${null!=myDataRemark?myDataRemark:''}" type="hidden">
<input id="Look" th:value="${null!=Look?Look:''}" type="hidden">
<div class="wrapper wrapper-content myFull">
    <div class="row myFull">
        <div class="col-sm-12 myFull">
            <div class="ibox float-e-margins myFull">
                <div class="ibox-content myFull" style="overflow-y: auto">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">申报标题：</label>
                            <div class="col-sm-8">
                                <input id="title" name="name"
                                       placeholder="请输入申报标题" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">申报图片：</label>
                            <div class="col-sm-8">
                                <div class="listImg test0"></div>
                                <button type="button" class="layui-btn" id="test0">上传图片</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">申报说明：</label>
                            <div class="col-sm-8">
                                <div class="listImg test1"></div>
                                <button type="button" class="layui-btn" id="test1">上传附件</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"> </label>
                            <div id="editor—wrapper" class="col-sm-8">
                                <div id="toolbar-container"><!-- 工具栏 --></div>
                                <div id="editor-container"><!-- 编辑器 --></div>
                            </div>
                        </div>

                        <div style="height: 2px;width: 100%;background-color: #000;margin: 10px 0;"></div>
                        <div class="form-group"><label class="col-sm-3 control-label">优秀实习就业单位</label></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">就业单位推荐表：</label>
                            <div class="col-sm-8">
                                <div class="listImg test2"></div>
                                <button type="button" class="layui-btn" id="test2">上传附件</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">就业情况简介与典型事迹：</label>
                            <div class="col-sm-8">
                                <div class="listImg test3"></div>
                                <button type="button" class="layui-btn" id="test3">上传附件</button>
                            </div>
                        </div>

                        <div style="height: 2px;width: 100%;background-color: #000;margin: 10px 0;"></div>
                        <div class="form-group"><label class="col-sm-3 control-label">优秀培训教师</label></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">优秀教师推荐表：</label>
                            <div class="col-sm-8">
                                <div class="listImg test4"></div>
                                <button type="button" class="layui-btn" id="test4">上传附件</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">证书培训经历与优秀事迹：</label>
                            <div class="col-sm-8">
                                <div class="listImg test5"></div>
                                <button type="button" class="layui-btn" id="test5">上传附件</button>
                            </div>
                        </div>

                        <div style="height: 2px;width: 100%;background-color: #000;margin: 10px 0;"></div>
                        <div class="form-group"><label class="col-sm-3 control-label">优秀考务工作者</label></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">考务工作者推荐表：</label>
                            <div class="col-sm-8">
                                <div class="listImg test6"></div>
                                <button type="button" class="layui-btn" id="test6">上传附件</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">组考、督导经历与优秀事迹：</label>
                            <div class="col-sm-8">
                                <div class="listImg test7"></div>
                                <button type="button" class="layui-btn" id="test7">上传附件</button>
                            </div>
                        </div>

                        <div style="height: 2px;width: 100%;background-color: #000;margin: 10px 0;"></div>
                        <div class="form-group"><label class="col-sm-3 control-label">优秀组织管理奖</label></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">优秀组织管理奖推荐表：</label>
                            <div class="col-sm-8">
                                <div class="listImg test8"></div>
                                <button type="button" class="layui-btn" id="test8">上传附件</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">组佐证材料：</label>
                            <div class="col-sm-8">
                                <div class="listImg test9"></div>
                                <button type="button" class="layui-btn" id="test9">上传附件</button>
                            </div>
                        </div>

                        <div style="height: 2px;width: 100%;background-color: #000;margin: 10px 0;"></div>
                        <div class="form-group"><label class="col-sm-3 control-label">优秀案例</label></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">就业单位推荐表：</label>
                            <div class="col-sm-8">
                                <div class="listImg test10"></div>
                                <button type="button" class="layui-btn" id="test10">上传附件</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">典型案例：</label>
                            <div class="col-sm-8">
                                <div class="listImg test11"></div>
                                <button type="button" class="layui-btn" id="test11">上传附件</button>
                            </div>
                        </div>

                        <div id="mybutton" class="form-group" style="margin-top: 50px;">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script>
    //
    let myEditor;
    //文件名字
    let fileName = ''

    //文件上传地址
    let myFiles = {
        test0: 'img',//图片
        test1: 'reportFile',//申报说明附件
        test2: 'jobFile',//就业单位推荐表
        test3: 'introFile',//就业情况简介与典型事迹
        test4: 'teacherFile',//优秀教师推荐表
        test5: 'trainFile',//证书培训经历与优秀事迹
        test6: 'workerFile',//考务工作者推荐表
        test7: 'storyFile',//组考、督导经历与优秀事迹
        test8: 'specialFile',//特殊贡献推荐表
        test9: 'proofFile',//佐证材料
        test10: 'unitFile',// 优秀案例 就业单位推荐表
        test11: 'caseFile',//典型案例

    }
    let myDatas = {
        remark: '' //申报说明
    }
    //修改
    let myData = $("#myData").val()
    let myDataRemark = $("#myDataRemark").val()
    //是否编辑
    let myLook = $("#Look").val();

    $().ready(function () {
        validateRule();
        setWangeditor();

        layui.use(['upload', 'layer'], function () {
            var $ = layui.jquery
                , upload = layui.upload
                , layer = layui.layer;

            //图片上传
            Object.keys(myFiles).forEach(item => {

                upload.render({
                    elem: `#${item}`,
                    url: '/common/sysFile/upload', // 实际使用时改成您自己的上传接口即可。
                    multiple: true,
                    accept: item == 'test0' ? 'images' : 'file'
                    , before: (obj) => {
                        //获取名字
                        obj.preview((index, file, result) => {
                            fileName = file.name
                        })
                        layer.load();
                    }
                    , done: (res) => {
                        if (res.code == 0) {
                            layer.closeAll();
                            let str = '';
                            myDatas[myFiles[item]] = res.data
                            str += (item == 'test0' ? `<div class="closeBtn closeImages"> <img class="upImg" src="${res.data}" width="80" height="80"/>` : `
                                                   <div class="closeBtn "><span class="upImg" >${fileName}</span>`)
                                + `<span class="iconclose close2" ><img src="../../../img/close.png"></span></div>   `;
                            $(`.${item}`).html(str);
                            $(`#${item}`).hide();
                            $(`.${item} .close2`).click(() => {
                                removeContent(`#${item}`, `.${item}`)
                            })
                        }
                    }
                    , error: function (res) {
                        layer.closeAll();
                        layer.msg(res.msg)
                    }
                });


            })


        })
        //修改
        if (null != myData && '' != myData.trim()) {
            let myDataList = myData.replace("DeclareReadyDO(", '').replace(")", '').split(',')
            myData = {}
            myDataList.forEach(item => {
                if (null != item.split("=")[1] && '' != item.split("=")[1] && 'null' != item.split("=")[1].trim()) {
                    myData[item.split("=")[0].trim()] = item.substring(item.indexOf("=") + 1)
                }
            })
            myData.remark = myDataRemark
            //存在初始化
            $("#title").val(myData.title)
            Object.keys(myFiles).forEach(item => {
                if (null != myData[myFiles[item]] && '' != myData[myFiles[item]].trim()) {
                    let str = '';
                    myDatas[myFiles[item]] = myData[myFiles[item]]
                    fileName = myData[myFiles[item]].substr(myData[myFiles[item]].lastIndexOf('/') + 1)
                    fileName = fileName.substring(32)
                    str += (item == 'test0' ? `<div class="closeBtn closeImages"> <img class="upImg" src="${myData[myFiles[item]]}" width="80" height="80"/>` :
                            `<div class="closeBtn"><span class="upImg" >${fileName}</span>`) +
                        ` <span class="iconclose close2" ><img src="../../../img/close.png"></span> </div> `;
                    $(`.${item}`).html(str);
                    $(`#${item}`).hide();
                    $(`.${item} .close2`).click(() => {
                        removeContent(`#${item}`, `.${item}`, `${item}`)
                    })
                }
            })
            myEditor.setHtml(myData.remark)
            myDatas.remark = myData.remark
            myDatas.id = myData.id

        }
        //是否编辑
        if (null != myLook && '' != myLook.trim()) {
            $("#title").attr("disabled", "disabled");
            Object.keys(myFiles).forEach(item => {
                let str = '';
                if (null != myData[myFiles[item]] && '' != myData[myFiles[item]].trim()) {
                    myDatas[myFiles[item]] = myData[myFiles[item]]
                    fileName = myData[myFiles[item]].substr(myData[myFiles[item]].lastIndexOf('/') + 1)
                    fileName = fileName.substring(32)
                    str += (item == 'test0' ? `<div class="closeBtn closeImages"> <img class="upImg" src="${myData[myFiles[item]]}" width="80" height="80"/>` :
                            `<div class="closeBtn"><span class="upImg" >${fileName}</span>`) +
                        `</div> `;
                    $(`.${item}`).html(str);
                    $(`#${item}`).hide();
                } else {
                    str += (item == 'test0' ? `<div class="closeBtn closeImages"><img class="upImg" src="../../../img/notImage.jpg" width="80" height="80"/></div> ` :
                        `<div class="closeBtn"><span class="upImg" >暂无文件</span></div> `);
                    $(`.${item}`).html(str);
                    $(`#${item}`).hide();
                }
            })
            $(`#mybutton`).hide();
            myEditor.disable()

        }
    });

    $.validator.setDefaults({
        submitHandler: function () {
            //判断所有数据
            let title=$('#title').val()
            if(null==title||''==title.trim()){
                layer.msg('请输入申报标题');
                return ;
            }
            let myDataId = $("#myData").val()
            if (null == myDataId || '' == myDataId.trim()) {
                let myAllData = {
                    title: $('#title').val()
                }
                myAllData = {...myAllData, ...myDatas}

                if(null==myAllData.remark||''==myAllData.remark.trim()){
                    layer.msg('请输入申报说明');
                    return ;
                }
                if(null==myAllData.img||''==myAllData.img.trim()){
                    layer.msg('请上传申报图片');
                    return ;
                }
                if(null==myAllData.reportFile||''==myAllData.reportFile.trim()){
                    layer.msg('请上传申报说明');
                    return ;
                }
                save(myAllData);
            } else {
                let myAllData = {
                    title: $('#title').val()
                }
                myAllData = {...myAllData, ...myDatas}
                if(null==myAllData.remark||''==myAllData.remark.trim()){
                    layer.msg('请输入申报说明');
                    return ;
                }
                if(null==myAllData.img||''==myAllData.img.trim()){
                    layer.msg('请上传申报图片');
                    return ;
                }
                if(null==myAllData.reportFile||''==myAllData.reportFile.trim()){
                    layer.msg('请上传申报说明');
                    return ;
                }
                update(myAllData);
            }

        }
    });

    //新增
    function save(myAllData) {
        $.ajax({
            cache: true,
            type: "POST",
            url: "/jzweb/declareReady/save",
            data: myAllData,// 你的formid
            async: false,
            error: function (request) {
                parent.layer.alert("Connection error");
            },
            success: function (data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);

                } else {
                    parent.layer.alert(data.msg)
                }

            }
        });

    }

    //修改
    const update = (MyAllData) => {
        $.ajax({
            cache: true,
            type: "POST",
            url: "/jzweb/declareReady/update",
            data: MyAllData,
            async: false,
            error: function (request) {
                parent.layer.alert("Connection error");
            },
            success: function (data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);

                } else {
                    parent.layer.alert(data.msg)
                }

            }
        });
    }

    //from设置
    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                title: {
                    required: true
                }
            },
            messages: {
                title: {
                    required: icon + "请输入申报标题"
                },
            }
        })
    }


    //删除
    function removeContent(parent, element, item) {
        $(parent).show();
        $(element).html('');
        myDatas[myFiles[item]] = ''

    }

    //富文本
    const setWangeditor = () => {
        const {createEditor, createToolbar} = window.wangEditor

        const editorConfig = {
            placeholder: '请输入介绍',
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'file',
                    server: '',
                    // 自定义上传
                    async customUpload(file, insertFn) {
                        var formData = new FormData();
                        formData.append('file', file);
                        //文件上传
                        await $.ajax({
                            cache: false,
                            async: true,
                            processData: false,
                            contentType: false,
                            type: "POST",
                            url: "/common/sysFile/upload",
                            data: formData,
                            error: (request) => {
                                parent.layer.alert("Connection error");
                            },
                            success: (res) => {
                                if (res.code == 0) {
                                    // 最后插入图片
                                    insertFn(res.data, '', '')
                                } else {
                                    parent.layer.alert(res.msg)
                                }

                            }
                        });
                    }
                    // base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
                },
                uploadVideo: {
                    fieldName: 'file',
                    server: '',
                    // 自定义上传
                    async customUpload(file, insertFn) {
                        var formData = new FormData();
                        formData.append('file', file);
                        //文件上传
                        await $.ajax({
                            cache: false,
                            async: true,
                            processData: false,
                            contentType: false,
                            type: "POST",
                            url: "/common/sysFile/upload",
                            data: formData,
                            error: (request) => {
                                parent.layer.alert("Connection error");
                            },
                            success: (res) => {
                                if (res.code == 0) {
                                    // 最后插入视频
                                    insertFn(res.data, '')
                                } else {
                                    parent.layer.alert(res.msg)
                                }

                            }
                        });
                    }
                }
            },
            onChange(editor) {
                myDatas.remark = editor.getHtml()
            }
        }

        myEditor = createEditor({
            selector: '#editor-container',
            html: '',
            config: editorConfig,
            mode: 'default', // or 'simple'
        })

        const toolbarConfig = {
            toolbarKeys: [
                "headerSelect",
                "blockquote",
                "|",
                "bold",
                "underline",
                "italic",
                {
                    "key": "group-more-style",
                    "title": "更多",
                    "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
                    "menuKeys": [
                        "through",
                        "code",
                        "sup",
                        "sub",
                        "clearStyle"
                    ]
                },
                "color",
                "bgColor",
                "|",
                "fontSize",
                "fontFamily",
                "lineHeight",
                "|",
                "bulletedList",
                "numberedList",
                "todo",
                {
                    "key": "group-justify",
                    "title": "对齐",
                    "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
                    "menuKeys": [
                        "justifyLeft",
                        "justifyRight",
                        "justifyCenter",
                        "justifyJustify"
                    ]
                },
                {
                    "key": "group-indent",
                    "title": "缩进",
                    "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
                    "menuKeys": [
                        "indent",
                        "delIndent"
                    ]
                },
                "|",
                // "emotion",
                "insertLink",
                {
                    "key": "group-image",
                    "title": "图片",
                    "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
                    "menuKeys": [
                        "insertImage",
                        "uploadImage"
                    ]
                },
                {
                    "key": "group-video",
                    "title": "视频",
                    "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>",
                    "menuKeys": [
                        "insertVideo",
                        "uploadVideo"
                    ]
                },
                "insertTable",
                "codeBlock",
                "divider",
                "undo",
                "redo",
                "fullScreen"
            ]
        }
        const toolbar = createToolbar({
            editor: myEditor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })
    }

</script>
</body>
</html>
